<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UI元素状态伪类</title>

    <style>
        .tab {
            width: 60%;
            border: 1px solid blue;
            border-collapse: collapse;
            margin: auto;
        }
        
        .tab td {
            height: 30px;
            border: 1px solid blue;
        }
        
        .tab td:first-child {
            width: 30%;
            text-align: right;
        }
        
        .tab td:last-child {
            width: 70%;
            text-align: left;
        }
        
        input[type=checkbox]:enabled {
            width: 50px;
            height: 50px;
        }
        
        input[type=checkbox]:checked {
            width: 100px;
            height: 100px;
        }
        
        input:disabled {
            height: 50px;
            background: red;
        }
    </style>

</head>

<body>
    <form action="">
        <table class="tab">
            <tr>
                <td>用户编号</td>
                <td> <input type="text" name="userid" value="100001" disabled> ( disabled ) </td>
            </tr>
            <tr>
                <td>用户名</td>
                <td> <input type="text" name="username" value="zhouzhiruo" readonly> ( readonly ) </td>
            </tr>
            <tr>
                <td>性别</td>
                <td>
                    <input type="radio" name="gender" value="male">靓仔
                    <input type="radio" name="gender" value="female" checked>靓妹
                </td>
            </tr>
            <tr>
                <td>爱好</td>
                <td>
                    <input type="checkbox" name="hobby" value="eat">吃
                    <input type="checkbox" name="hobby" value="sleep">睡
                    <input type="checkbox" name="hobby" value="eat-ji" checked>吃鸡
                    <input type="checkbox" name="hobby" value="wc">上厕所
                </td>
            </tr>
            <tr>
                <td>省份</td>
                <td>
                    <select name="province">
                    <option value="fujian">福建</option>
                    <option value="guangdong">广东</option>
                    <option value="hunan">湖南</option>
                    <option value="jiangxi" selected>江西</option>
                    <option value="hubei">湖北</option>
                    <option value="anhui">安徽</option>
                    <option value="zhejiang">浙江</option>
                </select> ( selected )
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <button type="submit">提交</button>
                </td>
            </tr>
        </table>
    </form>

</body>

</html>